<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
		<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=Zx02LfcKMpWEw5Yr8QIOM5ahcHIFOrlr"></script>
		<script type="text/javascript" src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script>
		<title>网点分布</title>
		<style type="text/css">
			body,
			html,
			#allmap {
				width: 100%;
				height: 100%;
				overflow: hidden;
				margin: 0;
				font-family: "微软雅黑";
			}

			.main {
				position: fixed;
				width: 100%;
				height: 100%;
				overflow: hidden;
			}

			.current {
				width: 50px;
				height: 50px;
				right: 25px;
				bottom: 50px;
				z-index: 2;
				position: fixed;
				background: rgba(255, 255, 255, 0.80);
				box-shadow: 0 0 14px 1px rgba(0, 0, 0, 0.20);
				border-radius: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 36px;
			}

			.current img {
				width: 80%;
			}

			.anchorBL {
				display: none;
			}

			.black-mark {
				top: 0;
				left: 0;
				position: fixed;
				width: 100%;
				height: 100%;
				z-index: 3;
				transition: all 0.5s;
				display: none;
			}

			.bottomAlert {
				border-radius: 12px 12px 0 0;
				background-color: #fff;
				width: 100%;
				position: absolute;
				bottom: 0;
				padding-bottom: 50px;
				z-index: 4;
				transition: transform 0.3s;
				transform: translate(0, 100%);
				box-shadow: 0 -1px 2px 1px rgba(17, 17, 17, 0.06);
			}

			.title {
				padding: 10px 0;
				font-size: 16px;
				color: #111111;
				letter-spacing: 0;
				display: flex;
				justify-content: space-between;
			}

			.sm-title {
				font-size: 14px;
				color: #B2B2B2;
				letter-spacing: 0;
				margin: 15px 0 17.5px 0;
			}

			.content {
				border-bottom: .5px solid #E8EAEC;
				margin: 7.5px 15px;
			}

			.name {
				font-size: 16px;
				color: #111111;
				letter-spacing: 0;
			}

			.tag {
				padding: 2px 6px;
				font-size: 8px;
				color: #1679FF;
				letter-spacing: 0;
				background: #FFFFFF;
				border: .5px solid #1679FF;
				border-radius: 6px;
				margin-left: 5px;
			}

			.describe {
				font-size: 12px;
				color: #B2B2B2;
				letter-spacing: 0;
				margin-bottom: 13px;
			}

			.support {
				color: #111111;
				display: flex;
				flex-wrap: wrap;
			}

			.support .item {
				font-size: 10px;
				color: #111111;
				letter-spacing: 0;
				width: 25%;
				margin: 0 0 25px 0;
			}

			.support .item .iconfont {
				font-size: 15px;
				margin-top: -2px;
			}

			.status {
				display: flex;
				justify-content: space-between;
			}

			.status .item-title {
				margin-bottom: 15px;
			}

			.status .item {
				font-size: 13px;
				color: #111111;
				letter-spacing: 0;
				padding: 0 4px;

			}

			.status .item .item-value {
				display: flex;
				align-items: center;
			}

			.status .item .item-value .iconfont {
				font-size: 30px;
				margin-right: 5px;
			}

			/*图标库*/
			@font-face {
				font-family: 'iconfont';
				/* src: url('https://at.alicdn.com/t/font_984976_oq0bccgqy9g.ttf') format('truetype'); */
				src: url('https://at.alicdn.com/t/font_984976_ttjfvwhkkw.ttf') format('truetype');
			}

			.iconfont {
				font-family: iconfont;
			}
		</style>
	</head>
	<body>
		<div class="main">
			<div id="allmap"></div>
			<div class="current iconfont" onclick="toCurrent()">
				&#xe604;
			</div>
			<div id="black-mark" class="black-mark" onclick="hideMark()"></div>
			<div id="bottomAlert" class="bottomAlert">
				<div class="content">
					<div class="title" style="justify-content: center;">
						<text>网点详情</text>
						<!-- <text class="iconfont">&#xe623;</text> -->
					</div>
				</div>
				<div class="content">
					<div class="title">
						<div>
							<text class="name" id="site_name"></text>
							<div>
								<text class="tag" id="is_share">共享</text>
								<text class="tag" id="color">彩色</text>
								<text class="tag" id="Photos">相片冲印</text>
							</div>
						</div>
						<text class="iconfont" style="color:#1679FF" onclick="tel()">&#xe603;</text>
					</div>
					<div class="describe">
						<text id="service_time">营业时间：全年24小时不休</text>
					</div>
					<div class="describe">
						<text id="address">网点地址：</text>
					</div>
				</div>
				<div class="content">
					<div class="sm-title">
						<text>功能支持</text>
					</div>
					<div class="support">
						
						<div class="item" id="is_Tourist">
							<text class="iconfont">&#xe6a1;</text>
							<text>游客</text>
						</div>
						<div class="item" id="is_member">
							<text class="iconfont">&#xe65b;</text>
							<text>会员</text>
						</div>
						<div class="item" id="is_print">
							<text class="iconfont">&#xe64b;</text>
							<text>打印</text>
						</div>
						<div class="item" id="is_copy">
							<text class="iconfont">&#xe64c;</text>
							<text>复印</text>
						</div>
						
						<div class="item" id="is_scan">
							<text class="iconfont">&#xe652;</text>
							<text>扫描</text>
						</div>
						<div class="item" id="is_A3">
							<text class="iconfont">&#xe651;</text>
							<text>A3</text>
						</div>
						<div class="item" id="is_colour">
							<text class="iconfont">&#xe653;</text>
							<text>彩色</text>
						</div>
						<div class="item" id="is_Printing">
							<text class="iconfont">&#xe655;</text>
							<text>相片冲印</text>
						</div>
					</div>
				</div>
				<div class="content" style="border-bottom: none;">
					<div class="sm-title">
						<text>设备信息</text>
					</div>
					<div class="status">
						<div class="item">
							<div class="item-title"><text>状态</text></div>
							<div class="item-value">
								<text class="iconfont" id="status_icon">&#xe64d;</text>
								<text id="status">正常</text>
							</div>
						</div>
						<div class="item">
							<div class="item-title"><text>纸张</text></div>
							<div class="item-value">
								<text class="iconfont" id="tray_status_icon">&#xe64e;</text>
								<text id="tray_status">正常</text>
							</div>
						</div>
						<div class="item">
							<div class="item-title"><text>耗材</text></div>
							<div class="item-value">
								<text class="iconfont" id="toner_status_icon">&#xe649;</text>
								<text id="toner_status">正常</text>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>
<script type="text/javascript">
	// 百度地图API功能
	var map = new BMap.Map("allmap"); //地图实例
	var geolocation = new BMap.Geolocation(); //经纬度实例
	var current; //当前位置经纬度
	var markDom; //遮罩层DOM
	var alertDom; //弹出框DOM							
	var exclude_ids = []; //已经查询过的设备id
	var default_id = GetUrlParam('id'); //如果是列表item点击进来的
	window.onload = function() {
		markDom = document.getElementById("black-mark");
		alertDom = document.getElementById("bottomAlert");
	}

	geolocation.getCurrentPosition(function(r) {
		current = r.point;
		if (default_id && default_id > 0) {
			setTimeout(function() { //如果是点击item进来的 就对地图进行平移
				map.panTo(new BMap.Point(GetUrlParam('lng'), GetUrlParam('lat')));
				checkDegree();
			}, 100);
		}
		map.centerAndZoom(current, 15);
		var mk = new BMap.Marker(current);
		map.addOverlay(mk);
	}, {
		enableHighAccuracy: true
	})

	map.addEventListener("zoomend", function(evt) {
		checkDegree()
	});
	map.addEventListener("dragend", function(evt) {
		checkDegree()
	});
	// 到当前位置
	function toCurrent() {
		map.centerAndZoom(current, 18);
		// map.panTo(current);
	};
	Array.prototype.pushs = function(val) {
		if (this.indexOf(val) < 0) {
			this.push(val)
		}
		return this;
	}

	//获取url参数
	function GetUrlParam(paraName) {
		var url = document.location.toString();
		var arrObj = url.split("?");
		if (arrObj.length > 1) {
			var arrPara = arrObj[1].split("&");
			var arr;
			for (var i = 0; i < arrPara.length; i++) {
				arr = arrPara[i].split("=");
				if (arr != null && arr[0] == paraName) {
					return arr[1];
				}
			}
			return "";
		} else {
			return "";
		}
	}


	// 更新覆盖物
	function addMarks(marks) {
		var myIcon = new BMap.Icon("./img/point.png", new BMap.Size(52, 64), {
			anchor: new BMap.Size(52, 64)
		});
		// var myIcon = new BMap.Symbol(
		// '<svg t="1556611069115" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4012" id="mx_n_1556611069116" data-spm-anchor-id="a313x.7781069.0.i11" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M764.586667 176.810667c-139.264-139.264-365.909333-139.264-506.538667 0-139.264 139.264-139.264 365.909333 0 506.538666 8.192 8.192 16.384 15.018667 24.576 23.210667l228.010667 245.76 229.376-247.125333c8.192-6.826667 16.384-13.653333 23.210666-21.845334 141.994667-140.629333 141.994667-367.274667 1.365334-506.538666z" fill="#1679FF" p-id="4013" data-spm-anchor-id="a313x.7781069.0.i10" class=""></path><path d="M512 429.397333m-315.392 0a315.392 315.392 0 1 0 630.784 0 315.392 315.392 0 1 0-630.784 0Z" fill="#ffffff" p-id="4014" data-spm-anchor-id="a313x.7781069.0.i9" class=""></path><path d="M669.013333 310.613333h-22.528c0-0.682667 0.682667-2.048 0.682667-2.730666v-51.882667c0-6.826667-6.826667-13.653333-13.653333-13.653333H391.850667c-6.826667 0-13.653333 6.826667-13.653334 13.653333v51.882667c0 0.682667 0 2.048 0.682667 2.730666H354.986667c-25.941333 0-46.421333 20.48-46.421334 46.421334v172.032c0 13.653333 10.922667 24.576 24.576 24.576h43.690667v50.517333c0 12.288 9.557333 19.114667 19.114667 19.114667h232.106666c10.922667 0 19.114667-9.557333 19.114667-19.114667v-50.517333h43.690667c13.653333 0 24.576-10.922667 24.576-24.576V357.034667c0-25.941333-20.48-46.421333-46.421334-46.421334z m-279.893333-2.730666v-51.882667c0-1.365333 1.365333-2.730667 2.730667-2.730667h241.664c1.365333 0 2.730667 1.365333 2.730666 2.730667v54.613333H389.12v-2.730666z m247.125333 296.277333c0 4.096-2.730667 8.192-8.192 8.192H395.946667c-4.096 0-8.192-2.730667-8.192-8.192v-150.186667c0-4.096 2.730667-8.192 8.192-8.192h232.106666c4.096 0 8.192 2.730667 8.192 8.192v150.186667z m68.266667-75.093333c0 8.192-5.461333 13.653333-13.653333 13.653333h-43.690667v-88.746667c0-12.288-9.557333-19.114667-19.114667-19.114666H395.946667c-12.288 0-19.114667 9.557333-19.114667 19.114666v88.746667h-43.690667c-8.192 0-13.653333-5.461333-13.653333-13.653333V357.034667c0-19.114667 16.384-35.498667 35.498667-35.498667h314.026666c19.114667 0 35.498667 16.384 35.498667 35.498667v172.032z" fill="#1679FF" p-id="4015"></path></svg>', 
		// {
		// 	rotation: 0, //顺时针旋转40度
		// 	fillColor: '#1679ff',
		// 	fillOpacity: 1,
		// 	strokeColor: '#555',
		// 	scale: .1,
		// 	strokeWeight: 0 //线宽
		// }) 
		marks.map(item => {
			exclude_ids.pushs(item.id);
			var temp = new BMap.Marker(new BMap.Point(item.lng, item.lat), {
				icon: myIcon
			});
			temp.data = item;
			temp.addEventListener("click", markClicks);
			if (default_id && item.id == default_id) {
				console.log('找到相同id')
				console.log(JSON.stringify(item))
				markClicks();
			}

			function markClicks() {
				markClick(item);
			}
			map.addOverlay(temp)
		})
	};

	function markClick(mark) {
		axios.get("https://www.aidbuys.com/print/machine/err_status", {
			params: {
				id: mark.id
			}
		}).then(res => {
			console.log('获取设备异常'+JSON.stringify(res))
			mark.tray = res.data.tray;
			mark.toner = res.data.toner;
			
			
			
			console.log(JSON.stringify(mark))
			markDom = markDom || document.getElementById("black-mark");
			alertDom = alertDom || document.getElementById("bottomAlert");
			markDom.style.display = "block";
			var Dom_site_name = document.querySelector("#site_name"),
				Dom_is_share = document.querySelector("#is_share"),
				Dom_color = document.querySelector("#color"),
				Dom_service_time = document.querySelector("#service_time"),
				Dom_address = document.querySelector("#address"),
				Dom_status_icon = document.querySelector("#status_icon"),
				Dom_status = document.querySelector("#status"),
				Dom_tray_status_icon = document.querySelector("#tray_status_icon"),
				Dom_tray_status = document.querySelector("#tray_status"),
				Dom_toner_status_icon = document.querySelector("#toner_status_icon"),
				Dom_toner_status = document.querySelector("#toner_status");
			
			Dom_site_name.innerHTML = mark.site_name;
			if (!mark.is_share) Dom_is_share.style.display = "none";
			// if (!mark.color) Dom_color.style.display = "none";
			var Week = new Date().getDay();
			switch (Week) {
				case 0:
					Dom_service_time.innerHTML = '营业时间：' + mark.service_sun;
				case 1:
					Dom_service_time.innerHTML = '营业时间：' + mark.service_mon;
				case 2:
					Dom_service_time.innerHTML = '营业时间：' + mark.service_tues;
				case 3:
					Dom_service_time.innerHTML = '营业时间：' + mark.service_wed;
				case 4:
					Dom_service_time.innerHTML = '营业时间：' + mark.service_thur;
				case 5:
					Dom_service_time.innerHTML = '营业时间：' + mark.service_fri;
				case 6:
					Dom_service_time.innerHTML = '营业时间：' + mark.service_sat;
			}
			Dom_address.innerHTML = '网点地址：' + mark.address;
			if (mark.machine_status) {
				Dom_status_icon.style.color = '#00a854';
				Dom_status_icon.innerHTML = '&#xe64d;';
				Dom_status.innerHTML = '正常';
			} else {
				Dom_status_icon.style.color = '#ED0909';
				Dom_status_icon.innerHTML = '&#xe64f;';
				Dom_status.innerHTML = '异常';
			}
			if (mark.tray) {} else {
				Dom_tray_status_icon.style.color = '#ED0909';
				Dom_tray_status.innerHTML = '异常';
			}
			if (mark.toner) {} else {
				Dom_toner_status_icon.style.color = '#ED0909';
				Dom_toner_status.innerHTML = '异常';
			}
			
			if(mark.support){
				if (mark.support.indexOf('彩色') >= 0) mark.is_colour = 1;
				if (mark.support.indexOf('游客') >= 0) mark.is_Tourist = 1;
				if (mark.support.indexOf('会员') >= 0) mark.is_member = 1;
				if (mark.support.indexOf('A3') >= 0) mark.is_A3 = 1;
				if (mark.support.indexOf('扫描') >= 0) mark.is_scan = 1;
				if (mark.support.indexOf('复印') >= 0) mark.is_copy = 1;
				if (mark.support.indexOf('打印') >= 0) mark.is_print = 1;
				if (mark.support.indexOf('冲印') >= 0) mark.is_Printing = 1;
			}
			
			if(!mark.is_colour){document.getElementById('is_colour').style.display ="none";}
			if(!mark.is_Tourist){document.getElementById('is_Tourist').style.display ="none";}
			if(!mark.is_member){document.getElementById('is_member').style.display ="none";}
			if(!mark.is_A3){document.getElementById('is_A3').style.display ="none";}
			if(!mark.is_scan){document.getElementById('is_scan').style.display ="none";}
			if(!mark.is_copy){document.getElementById('is_copy').style.display ="none";}
			if(!mark.is_print){document.getElementById('is_print').style.display ="none";}
			if(!mark.is_Printing){
				document.getElementById('is_Printing').style.display ="none";
				document.getElementById('Photos').style.display ="none";
				}
			if(mark.is_colour){Dom_color.style.display = "none";}
			
			
			//machine_server_tel
			setTimeout(() => {
				markDom.style.backgroundColor = "rgba(0,0,0,0.5)";
				// markDom.style.backgroundColor = "#fff";
			
				markDom.style.filter = "10px";
				alertDom.style.transform = "translate(0,0)"
			}, 1)
			
			
			
		})


		

	}

	function hideMark() {
		markDom = markDom || document.getElementById("black-mark");
		alertDom = alertDom || document.getElementById("bottomAlert");
		alertDom.style.transform = "translate(0,100%)"
		markDom.style.backgroundColor = "transparent";
		setTimeout(() => {
			markDom.style.display = "none"
		}, 1)
	}
	var l_lng = 0,
		l_lat = 0,
		r_lng = 0,
		r_lat = 0;
	// 记录经纬度
	function checkDegree() {
		var bs = map.getBounds();
		var l = bs.getSouthWest(); //可视区域左下角
		var r = bs.getNorthEast(); //可视区域右上角
		var flag = false;
		if (l_lng === 0) {
			l_lng = l.lng;
			l_lat = l.lat;
			r_lng = r.lng;
			r_lat = r.lat;
			flag = true;
		} else if ((l.lng < l_lng || l.lat < l_lat) || (r.lng > r_lng || r.lat > r_lat)) {
			l_lng = l.lng < l_lng ? l.lng : l_lng;
			l_lat = l.lat < l_lat ? l.lat : l_lat;
			r_lng = r.lng > r_lng ? r.lng : r_lng;
			r_lat = r.lat > r_lat ? r.lat : r_lat;
			flag = true;
		}
		if (flag) {
			getData();
		}
	}

	function getData() {
		console.log(JSON.stringify({
			l_lng: l_lng,
			l_lat: l_lat,
			r_lng: r_lng,
			r_lat: r_lat,
			exclude_ids: exclude_ids.join(",")
		}))
		axios.get("https://www.aidbuys.com/print/machine/map", {
			params: {
				l_lng: l_lng,
				l_lat: l_lat,
				r_lng: r_lng,
				r_lat: r_lat,
				exclude_ids: exclude_ids.join(",")
			}
		}).then(res => {
			console.log(JSON.stringify(res))
			addMarks(res.data)
		})
	}

	function tel() {
		window.location.href = 'tel://4001886966'
	}
</script>
